<template>
  <audio :src="url" @play="onPlay" @canplaythrough="canPlay" @playing="onPlaying" style="opacity:0" preload="auto" controls hidden="true"/>  
</template>

<script>
import $ from "@/common";
export default {
  data() {
    return {
      load: false,
      url: null,
      timeLength: 0,
      timeNow: 0,
      inPause: false,
      toPause: false,
      palyingClass: "btn-audio-playing"
    };
  },
  computed: {},
  watch: {},
  methods: {
    play() {
      Array.prototype.forEach.call(
        document.querySelectorAll(".btn-audio"),
        item => {
          if (item !== this.$targetButton) {
            item.classList.remove("btn-audio-loading");
            item.classList.remove("ivu-btn-loading");
            item.classList.remove("btn-audio-playing");
          }
          item.classList.remove("btn-audio-parse");
        }
      );
      if (this.$targetButton) {
        this.$targetButton.classList.add("btn-audio-loading");
        this.$targetButton.classList.add("ivu-btn-loading");
      }
      this.$nextTick(() => {
        var context = this.$el.play();
        if (context) {
          context.catch(() => {
            this.$targetButton.classList.remove("btn-audio-loading");
            this.$targetButton.classList.remove("ivu-btn-loading");
            this.$Message.error("声音播放错误:" + this.url);
          });
        } else {
          this.$targetButton.classList.remove("btn-audio-loading");
          this.$targetButton.classList.remove("ivu-btn-loading");
          this.$targetButton.classList.add(this.palyingClass);
        }
      });
    },
    pause() {
      this.toPause = true;
      this.$nextTick(() => {
        this.$targetButton.classList.remove(this.palyingClass);
        this.$targetButton.classList.add("btn-audio-parse");
        this.$el.pause();
      });
    },
    onPlay(v) {
      if (this.$targetButton) {
        //this.$targetButton.classList.remove("btn-audio-loading");
      }
    },
    onPlaying(v) {
      if (this.$targetButton) {
        this.$targetButton.classList.remove("btn-audio-loading");
        this.$targetButton.classList.remove("ivu-btn-loading");
        this.$targetButton.classList.add(this.palyingClass);
      }
      if (this.palyerTimer) {
        clearInterval(this.palyerTimer);
      }
      if (!this.inPause) {
        this.timeNow = 0;
      }
      this.palyerTimer = setInterval(() => {
        this.timeNow = this.timeNow + 0.1;
        if (this.timeLength && this.timeMask) {
          this.timeMask.style.width =
            this.timeNow / this.timeLength * 100 + "%";
        }
        if (this.toPause || !this.timeMask) {
          clearInterval(this.palyerTimer);
          this.toPause = false;
        }
        if (this.inPause) {
          this.inPause = false;
        }
        if (this.timeNow >= this.timeLength) {
          this.timeNow = 0;
          clearInterval(this.palyerTimer);
          this.timeMask.style.width = "0%";
        }
      }, 100);
    },
    canPlay(v) {
      if (this.$targetButton) {
        this.$targetButton.classList.remove("btn-audio-loading");
        this.$targetButton.classList.remove("ivu-btn-loading");
        this.$targetButton.classList.add(this.palyingClass);
      }
    }
  },
  created() {
    $.player = this;
    document.addEventListener("click", e => {
      var el;
      if (e.target.parentElement.attributes["data-audio"]) {
        el = e.target.parentElement;
      }
      if (e.target.attributes["data-audio"]) {
        el = e.target;
      }
      if (el && el.attributes["data-audio"]) {
        var url = el.attributes["data-audio"].value;
        var length = el.attributes["data-length"].value;
        this.timeMask = el.querySelector(".player-mask");
        this.timeLength = parseInt(length);
        this.url = url;
        if (this.$targetButton !== el) {
          this.$el.load();
          this.inPause = false;
        } else {
          this.inPause = true;
        }
        this.$targetButton = el;

        if (el.classList.contains(this.palyingClass)) {
          this.pause();
        } else {
          this.play();
        }
      }
    });
  }
};
</script>

<style lang="less">
.btn-audio {
  position: relative;
  .player-text {
    position: relative;
    z-index: 2;
  }

  .player-mask {
    display: none;
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0;
    background: rgba(214, 255, 188, 0.4);
    left: 0;
    border-radius: 4px;
    /*transition: width 0.3s;*/
  }
  &.btn-audio-parse .player-mask,
  &.btn-audio-playing .player-mask {
    display: block;
  }
  .ivu-icon {
    display: none;
    z-index: 2;
    position: relative;
    &.player-icon {
      display: inline-block;
    }
    &.ivu-icon-pause {
      display: none;
    }
    &.ivu-icon-play {
      display: inline-block;
    }
  }

  &.btn-audio-playing .ivu-icon {
    display: none;
    &.ivu-icon-play {
      display: none;
    }
    &.ivu-icon-pause {
      display: inline-block;
    }
  }
  &.btn-audio-loading .ivu-icon {
    display: inline-block;
    &.ivu-icon-play {
      display: none;
    }
    &.ivu-icon-pause {
      display: none;
    }
  }
}
</style>
